<template>
  <el-scrollbar style="height: 100%">
    <div id="bizVideoHouseCertCanvas" class="confirmTable">
      <el-row class="confirmTitle">苏州农商行远程银行电子凭证</el-row>
      <el-row class="confirmTableBody">
        <el-row class="border-bottom-bold-style">
          <el-col class="padding-style word-border-style" :span="6">电子凭证流水号：</el-col>
          <el-col class="padding-style txt-right word-border-style" :span="18">{{ bizCertData.coreSeqNo }}</el-col>
        </el-row>
        <el-row class="border-bottom-bold-style">
          <el-col class="padding-style word-border-style" :span="24">客户信息</el-col>
        </el-row>
        <el-row v-for="(item, index) in bizCertData.customerInfoList" :key="index">
          <el-row v-if="item.clientIdentityFlag">
            <el-row class="border-bottom-bold-style">
              <el-col class="padding-style word-border-style" :span="24">{{ item.customerInfo }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="6">姓名：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.name }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="6">性别：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.sex }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="6">民族：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.nation }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="6">出生年月：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.birthday }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="6">身份证号码：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.IdCard }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="6">证件有效期：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.IdTime }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="6">联系电话：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.tel }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="6">联系地址：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.address }}</el-col>
            </el-row>
            <el-row class="border-bottom-bold-style">
              <el-col class="padding-style" :span="6">职业：</el-col>
              <el-col class="padding-style txt-right" :span="18">{{ item.profession }}</el-col>
            </el-row>
            <el-row class="border-bottom-bold-style">
              <el-col class="padding-style word-border-style" :span="24">证件信息</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="24">正面照</el-col>
              <el-col class="padding-style txt-right peror-photo" :span="24">
                <img :src="item.frontPhoto">
              </el-col>
            </el-row>
            <el-row class="border-bottom-bold-style">
              <el-col class="padding-style" :span="24">反面照</el-col>
              <el-col class="padding-style txt-right peror-photo" :span="24">
                <img :src="item.backPhoto">
              </el-col>
            </el-row>
            <el-row class="border-bottom-bold-style">
              <el-col class="padding-style word-border-style" :span="24">核查结果</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="10">联网核查结果：</el-col>
              <el-col class="padding-style txt-right" :span="14">{{ item.internetResult }}</el-col>
            </el-row>
            <el-row class="border-bottom-style">
              <el-col class="padding-style" :span="10">人脸识别分数：</el-col>
              <el-col class="padding-style txt-right" :span="14">{{ item.faceScore }}</el-col>
            </el-row>
            <el-row class="border-bottom-bold-style">
              <el-col class="padding-style" :span="10">活体检测结果：</el-col>
              <el-col class="padding-style txt-right" :span="14">{{ item.onlineResult }}</el-col>
            </el-row>
          </el-row>
        </el-row>
        <el-row class="border-bottom-bold-style">
          <el-col class="padding-style word-border-style" :span="10">业务办理信息</el-col>
          <el-col class="padding-style txt-right" :span="14" />
        </el-row>
        <el-row v-for="(bussiness, index2) in bizCertData.bussinessInfoList" :key="'buss' + index2">
          <el-row v-if="bussiness.checkStatus" class="border-bottom-style">
            <el-col class="padding-style txt-left" :span="24">{{ bussiness.bussType }}</el-col>
          </el-row>
        </el-row>
        <el-row class="border-bottom-bold-style border-top-bold-style">
          <el-col class="padding-style word-border-style" :span="10">客户承诺&签名</el-col>
          <el-col class="padding-style txt-right" :span="14" />
        </el-row>
        <el-row>
          <el-col class="padding-style text-indent" :span="24">{{ bizCertData.costomeCommitment }}</el-col>
          <el-col class="padding-style" :span="24">
            <el-col class="txt-left" :span="24">客户签名：</el-col>
            <el-col class="peror-photo"><img :src="bizCertData.costomerSignature" alt=""></el-col>
          </el-col>
        </el-row>
      </el-row>
      <el-row class="confirmTableBFooter">
        <el-row>
          <el-col :span="4" class="footer-style">经办人：</el-col>
          <el-col :span="6" class="footer-style">{{ bizCertData.manager }}</el-col>
          <el-col :span="4" class="footer-style">经办人工号：</el-col>
          <el-col :span="10" class="footer-style">{{ bizCertData.managerNum }}</el-col>
        </el-row>
      </el-row>
    </div>
  </el-scrollbar>
</template>
<script>
export default {
  name: 'BizCertForm',
  components: {

  },
  props: ['bizCertData'],
  data() {
    return {}
  },
  created() {

  },
  mounted() {

  }
}
</script>
<style scoped>
  .word-border-style {
    font-weight: bold;
  }

  .confirmTable {
    padding: 10px 20px;
    width: 100%;
  }

  .confirmTitle {
    text-align: center;
    height: 34px;
    line-height: 34px;
    font-weight: bold;
  }

  .confirmTableBody {
    width: 100%;
    border: 2px solid #0c0c0c;
  }

  .padding-style {
    padding: 10px;
  }

  .border-bottom-style {
    border-bottom: 1px solid #909399
  }

  .border-bottom-bold-style {
    border-bottom: 2px solid #0c0c0c;
  }

  .border-top-bold-style{
    border-top: 2px solid #0c0c0c;
  }

  .confirmTableBFooter {
    padding: 5px;
  }

  .footer-style {
    padding: 4px;
  }

  .text-indent{
    text-indent: 24px;
    line-height: 25px;
  }

  .peror-photo {
    height: 200px;
    width: 300px;
    overflow: hidden;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }
</style>
